<template>
  <a-card class="box-card" :bordered="false" :body-style="{}">
    <div>
      <a-row v-if="element.options.titleRequired" type="flex" align="middle" class="box-card-title">
        <a-col :span="16">
          <span
            class="box-card-title-text"
            :style="{
              lineHeight: (element.options.lineHeight || '40') + 'px',
              height: (element.options.lineHeight || '40') + 'px',
              color: element.options.fontColor,
              fontSize: element.options.fontSize + 'px',
              fontWeight: element.options.fontWeight ? 'bold' : 'normal',
              textDecoration: element.options.textDecoration ? 'underline' : 'none',
              fontStyle: element.options.italic ? 'italic' : 'normal'
            }"
          >
            <span class="vertical-line" />
            {{ element.options.title }}
          </span>
        </a-col>
        <a-col v-if="source == 'renderer'" :span="8" class="box-card-title-bar">
          <a-button v-if="element.options.isShowRefresh" class="btn-icon" size="small" type="text" :spin="loading">
            <sync-outlined :spin="loading" @click="reFreshData" />
          </a-button>
          <a-button v-if="element.options.moreUrl && !isOutLink" class="btn-icon" size="small" type="text">
            <template v-slot:icon>
              <router-link :to="element.options.moreUrl">
                <avic-icon svg="MoreOutlined" />
              </router-link>
            </template>
          </a-button>
          <a-button v-if="element.options.moreUrl && isOutLink" class="btn-icon" size="small" type="text">
            <template v-slot:icon>
              <avic-icon svg="MoreOutlined" @click="goToUrl" />
            </template>
          </a-button>
        </a-col>
        <a-col v-if="source == 'design'" :span="8" class="box-card-title-bar">
          <a-button v-if="element.options.isShowRefresh" class="btn-icon" size="small" type="text" :spin="loading">
            <sync-outlined :spin="loading" />
          </a-button>
          <a-button v-if="element.options.moreUrl" class="btn-icon" size="small" type="text">
            <avic-icon svg="MoreOutlined" />
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div
      v-if="element.type == 'smallPage'"
      class="box-card-body"
      :class="{ 'body-mask': preview }"
      :style="{
        // top: element.options.titleRequired ? Number(element.options.lineHeight || '40') + 'px' : '0'
      }"
    >
      <component :is="detailVueCompnent" ref="smallPages" v-bind="elementParams" :element="element" />
    </div>
  </a-card>
</template>
<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
const modules = import.meta.glob('@/views/**/*.vue');
const props = defineProps({
  /** 门户小页元素 */
  element: { type: Object, default: null },
  /** 打开设计器来源 */
  source: { type: String, default: '' },
  /** 是否预览模式 */
  preview: { type: Boolean, default: true }
});
const loading = ref(false);
let timer = null;
const smallPages = ref();
const isOutLink = ref(false);
const detailVueCompnent = shallowRef();
const dealUrl = props.element.url.substring(
  0,
  props.element.url.indexOf('?') > -1 ? props.element.url.indexOf('?') : props.element.url.length
);
let page = modules[`/src/${dealUrl}.vue`];
const iframePaeg = modules[`/src/views/avic/portal/homepage/portletcards/IframePage.vue`];
page = page ? page : modules['/src/views/dashboard/404.vue'];
// 小页路径为地址时，用iframe加载外部链接
if (props.element.url.indexOf('http:') > -1 || props.element.url.indexOf('https:') > -1) {
  isOutLink.value = true;
  detailVueCompnent.value = defineAsyncComponent(iframePaeg);
} else {
  detailVueCompnent.value = defineAsyncComponent(page);
}
const elementParams = ref({});
if (props.element.url.indexOf('?') > -1) {
  const paramsUrl = props.element.url.substring(props.element.url.indexOf('?') + 1);
  paramsUrl.split('&')?.map((item) => {
    const tim = item.split('=');
    if (tim.length > 1) {
      const [key, value] = tim;
      elementParams.value[key] = value;
    }
    return item;
  });
} else if (props.element.url.indexOf('http:') > -1 || props.element.url.indexOf('https:') > -1) {
  elementParams.value.httpUrl = props.element.url;
}
onMounted(() => {
  /* 定时刷新 */
  if (props.element.options.refresh > 0) {
    const time = (60 / props.element.options.refresh) * 1000;
    timer = setInterval(autoLoadData, time);
  }
});
function autoLoadData() {
  loadData({ notUpdateSession: true });
}
function reFreshData() {
  loadData();
}
/* 刷新门户小页组件 */
function loadData(params?: any) {
  if (loading.value) {
    return;
  }
  loading.value = true;
  if (smallPages.value) {
    if (typeof smallPages.value.loadData === 'function') {
      smallPages.value.loadData(params);
    }
  }
  setTimeout(() => {
    loading.value = false;
  }, 300);
}
function goToUrl() {
  window.open(props.element.options.moreUrl);
}
onUnmounted(() => clearInterval(timer));
</script>
<style lang="less">
@import '../style/cardContainer.less';
</style>
